<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>list</title>
    <style>
        h1 {
            text-align: center;
        }

        span {
            font-weight: bold;
        }

        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }
    </style>

    <script th:src="@{/webjars/jquery/3.3.1/jquery.js}"></script>
    <script>
        function exit() {
            if (confirm("确认要退出系统吗")) {
                location.href = '/info/logout';
            }
        }
    </script>
</head>
<body>

<table>
    <tr>
        <td colspan="2"><h1>商务会员管理系统</h1></td>
        <td></td>
    </tr>
    <tr>
        <td colspan="2">
            用户名 <span th:text="${session.user.name}"></span>&nbsp;&nbsp;&nbsp;&nbsp;
            用户类型:<span th:text="${session.user.typeName}"></span>&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="javascript:;" th:onclick="'javascript:exit();'">退出</a>
        </td>
        <td></td>
    </tr>
    <tr>
        <td>
            <ul>
                <li><a th:href="@{/info/toModify}">修改密码</a></li>
                <li><a th:href="@{/info/list}">查看所有会员</a></li>
                <li><a th:href="@{/info/toadd}">新增会员</a></li>
            </ul>
        </td>

        <td>
            <div style="border: 3px solid black">
                <h1>会员管理</h1>
                <form action="/info/list" method="get">
                    用户名: <input name="name" type="text" th:value="${name}"/>
                    <input type="submit" value="查找"/>
                </form>

                <h2 th:if="${#lists.isEmpty(page.list)}">没有数据</h2>
                <table border="1" th:if="${!#lists.isEmpty(page.list)}" width="500px">
                    <tr>
                        <th>序号</th>
                        <th>用户名</th>
                        <th>用户类别</th>
                        <th>用户状态</th>
                        <th>最后修改时间</th>
                        <th>图片</th>
                    </tr>
                    <tr th:each="user:${page.list}">
                        <td th:text="${userStat.index+1}"></td>
                        <td th:text="${user.name}"></td>
                        <td th:text="${user.typeName}"></td>
                        <td th:text="${user.status==0?'已冻结':'正常'}"></td>
                        <td th:text="${#dates.format(user.getLast_modify_time(),'yyyy-MM-dd')}"></td>
                        <td>
                            <img th:src="@{${user.path}}">
                        </td>
                    </tr>
                </table>
                <a th:href="@{|/info/list?pageNo=1&name=${name}|}">首页</a>
                <a th:if="${pageNo>1}" th:href="@{|/info/list?pageNo=${page.pageNo-1}&name=${name}|}">上一页</a>

                    <!--button分页-->
                    <span th:each="pageNo1:${#numbers.sequence(1,page.pageCount)}">
                          <button style="padding: 15px">  <a th:href="@{|/info/list?name=${name}&pageNo=${pageNo1}|}" th:text="${pageNo1}"></a>  </button>
                    </span>


                <a th:if="${pageNo<page.pageCount}" th:href="@{|/info/list?pageNo=${page.pageNo+1}&name=${name}|}">下一页</a>
                <a th:href="@{|/info/list?pageNo=${page.pageCount}&name=${name}|}">尾页</a>

                第<span th:text="${pageNo}"></span>页/共<span th:text="${page.pageCount}"></span>页

                <!--下拉框的分页-->
                <select>
                    <option th:each="pageNo1:${#numbers.sequence(1,page.pageCount)}" th:value="${pageNo1}" th:text="${pageNo1}" th:selected="${pageNo1==pageNo}"></option>
                </select>
            </div>
        </td>
    </tr>
</table>

<script th:src="@{webjars/jquery/3.3.1/jquery.js}"></script>
<script>
    $("select").change(function () {
        var pageNo = $(this).val();
        var name =  $("[name=name]").val();
       location.href='/info/list?name='+name+'&pageNo='+pageNo;
    })
</script>
</body>
</html>